{% extends "base_content_type.html" %}

{% block fields %}
<li><label for="point">point</label>
<input id="point" name="point" size="100" value="{{ content.point }}"/>
</li>
<li><label for="address">address</label>
<input id="address" name="address" size="100" value="{{ content.address }}"/>
<input id="searchbutton" type="button" value="search"/>
</li>

<li><div id="map_edit" style="width: 500px; height: 300px"></div>
</li>
{% endblock %}

{% block editor_script_extra %}
var map_div = $('#map_edit');
var address = '{{ content.address }}';
var pointLatLng = $.map('{{ content.point }}'.split(','), Number);

var reallyDrawMap = function() {
  if (pointLatLng.length == 2) {
    map_div.jmap('init', {'mapCenter': pointLatLng});
    map_div.jmap('AddMarker', {'pointLatLng': pointLatLng, 'pointHTML': address});
    } 
  else {
    map_div.jmap('init');
    }

  $('#searchbutton').click(function(){
      var sopts = {'query': $('#address').val(), 'returnType': 'getLocations'};
      map_div.jmap('SearchAddress', sopts, function(result, options) {
          var valid = Mapifies.SearchCode(result.Status.code);
          if (valid.success) {
            $.each(result.Placemark, function(i, point) {
                var pointLatLng = [
                    point.Point.coordinates[1],
                    point.Point.coordinates[0]];
                map_div.jmap('AddMarker', {
                    'pointLatLng': pointLatLng,
                    'pointHTML': point.address});
                $('#point').val(pointLatLng.join(','));
                $('#address').val(point.address);
                map_div.jmap('MoveTo', {'mapCenter': pointLatLng});
                });
            }
          else {
            console.log(valid.message);
            }
          });
      return false; 
      });
  };


var drawMap = function() {
  if (!map_div.jmap) {
    $.getScript("/third_party/javascript/maps.min2.js", reallyDrawMap)
    } 
  else {
    reallyDrawMap()
    }
  };


if (!google.maps) {
  var gopts = {
    'nooldnames': true,
    'language': 'en',
    'callback': drawMap,
    };
  google.load('maps', '2', gopts);
  }
else {
  drawMap();
  }
{% endblock %}

{% block attributes %}
<div id="map_view" style="width: 500px; height: 300px"></div>

<script>
var map_div = $('#map_view');
var address = '{{ content.address }}';
var pointLatLng = $.map('{{ content.point }}'.split(','), Number);

// TODO: Factor this into a common module
var reallyDrawMap = function() {
  if (pointLatLng.length == 2) {
    map_div.jmap('init', {'mapCenter': pointLatLng});
    map_div.jmap('AddMarker', {'pointLatLng': pointLatLng, 'pointHTML': address});
    } 
  else {
    map_div.jmap('init');
    }
  };


var drawMap = function() {
  if (!map_div.jmap) {
    $.getScript("/third_party/javascript/maps.min2.js", reallyDrawMap)
    } 
  else {
    reallyDrawMap()
    }
  };


if (!google.maps) {
  var gopts = {
    'nooldnames': true,
    'language': 'en',
    'callback': drawMap,
    };
  google.load('maps', '2', gopts);
  }
else {
  drawMap();
  }
</script>
{% endblock %}
